<template>
	<!--
		注意 66行： Shortcuts组件
		resultsFilter 是通过报表id接口获取查询信息的字段
	 -->
	<div class="v-view">
		<a-modal
			:visible="saveDialog"
			@ok="saveReport"
			@cancel="
				saveDialog = false
				reportName = ''
			"
		>
			<a-menu v-model="dialogType" mode="horizontal">
				<a-menu-item key="tableToLook">新建报表至看板</a-menu-item>
				<a-menu-item key="tableSave">保存报表</a-menu-item>
			</a-menu>
			<div class="dialogContent">
				<template v-if="dialogType[0] === 'tableToLook'">
					<a-row>
						<a-col :span="5">
							<div class="itemHead">
								<span class="importColor">*</span>
								报表名称:
							</div>
						</a-col>
						<a-col :span="19">
							<a-input placeholder="请输入报表名称" v-model="reportName"></a-input>
						</a-col>
					</a-row>
					<div style="height: 20px"></div>
					<a-row>
						<a-col :span="5">
							<div class="itemHead">
								<span class="importColor">*</span>
								添加至看板:
							</div>
						</a-col>
						<a-col :span="19">
							<a-select
								v-model="chartSourceCurList"
								mode="multiple"
								style="width: 100%"
								placeholder="添加至看板"
							>
								<a-select-option v-for="item in chartSourceList" :key="item.chartId">
									{{ item.chartName }}
								</a-select-option>
							</a-select>
						</a-col>
					</a-row>
				</template>
				<template v-if="dialogType[0] === 'tableSave'">
					<a-input placeholder="请输入报表名称" v-model="reportName"></a-input>
				</template>
			</div>
		</a-modal>
		<a-modal title="当前计算进度" :visible="soutDialog" @ok="saveSout" @cancel="soutDialog = false">
			<a-row>
				<a-col :span="24">
					<a-slider v-model="precentValue" :min="0" :max="100" disabled />
				</a-col>
				<a-col :span="24">
					<div style="text-align: center; width: 100%">{{ precentValue }}%</div>
				</a-col>
			</a-row>
		</a-modal>
		<Breadcrumb moduleName="属性分析">
			<Shortcuts
				slot="content"
				:curPage="curPage"
				:reports="reportlist"
				:projectId="projectId"
				:resultsFilter="resultsFilter"
				@handleDel="delReport"
				@getRepoetData="getRepoetData"
				@searchReport="handleSearchReport"
				@handleRefresh="handleRefresh"
			/>
		</Breadcrumb>
		<div class="box">
			<div class="screen">
				<div class="analysis">
					<h3 class="title">分析属性</h3>
					<a-cascader
						class="user-cascader"
						:options="userAttr"
						v-model="selUserAttr"
						placeholder="请选择"
					/>

					<a-divider></a-divider>
					<!--是否是人群对比 默认为false-->
					<template v-if="!isPeopleGroup">
						<div class="user-groups-item">
							<a-button class="to-group-compare-left" size="small" type="link" disabled="">
								且用户符合
							</a-button>

						</div>
						<CustomScreen ref="customScreenRefToUser"></CustomScreen>
						<div style="margin-left: 7px;margin-top: 10px" @click="addCondition">
							<a-icon type="plus-circle" theme="filled" style="font-size: 16px;color: #2085EF ; "/>
							<span style="font-size: 14px;color: #405072;margin-left: 6px">添加条件</span>
						</div>

						<!--用户分组模块-->
						<a-divider></a-divider>
						<div>
							<div class="user-groups-item">
								<a-button class="to-group-compare-left" size="small" type="link" disabled="">
									分组项
								</a-button>
								<!--																<a-button class="to-group-compare" size="small" icon="user" @click="toPeopleCompare" type="link">-->
								<!--																	人群对比-->
								<!--																</a-button>-->

							</div>
						</div>

						<!--用户分组条目-->
						<template v-for="(item, ind) in userGroups">
							<div class="user-groups-item" :key="item + ''">
								<a-tag color="blue">
									{{ ind + 1 }}
								</a-tag>
								<a-select
									class="user-groups-item-select"
									size="small"
									v-model="curUserGroups[ind]"
									placeholder="请选择"
									show-search
								>
									<a-select-option
										:value="'总体'"
										:style="{ 'max-width': '600px' }"
										@click="clearUserGroups"
									>
										总体
									</a-select-option>
									<a-select-option
										v-for="(cItem, index) in userAttr"
										:key="index"
										:disabled="curUserGroups.indexOf(cItem.label) > -1"
										:value="cItem.label"
										:style="{ 'max-width': '600px' }"
										@click="checkUserGroups"
									>
										{{ cItem.label }}
									</a-select-option>
								</a-select>

								<!-- 移除筛选项 -->
								<a-icon v-if="userGroups.length > 1" type="close" @click="removeUserGroups(ind)" style="font-size: 16px;margin-left: 8px;color: #9AA2B4"/>
							</div>
						</template>

						<div style="margin-left: 7px;margin-top: 16px" @click="addUserGroups">
							<a-icon type="plus-circle" theme="filled" style="font-size: 16px;color: #2085EF ; "/>
							<span style="font-size: 14px;color: #405072;margin-left: 6px">添加分组项</span>
						</div>

					</template>

					<!--人群对比界面-->
					<template v-else>
						<div>
							<div class="user-groups-item">
								人群对比
								<a-button
									class="user-groups-item-right"
									icon="heat-map"
									type="link"
									@click="toPeopleCompare"
								>
									分组查看
								</a-button>
							</div>
							<div class="user-groups-item">
								<a-button disabled size="small">{{ funnelItem.length }}组人群</a-button>
							</div>

							<div class="steps" v-for="(mes, index) in funnelItem" :key="mes.key">
								<div class="step-wrap">
									<!--        序号+1-->
									<a-button disabled shape="circle" size="small">{{ index + 1 }}</a-button>
									<div class="step-wrap-group-num">人群{{ index + 1 }}</div>
									<a-button icon="plus" type="link" @click="editCond(index)">添加条件</a-button>

									<div style="margin-left: 10px" v-show="funnelItem.length > 2">
										<a-button icon="close-circle" type="link" @click="remvnoUserGroup(index)">
											删除此条
										</a-button>
									</div>
								</div>

								<CustomScreen :ref="`customScreenRef${index}`"></CustomScreen>
							</div>

							<div class="user-groups-item">
								<a-button icon="user-add" type="link" @click="addUserGroup">添加对比人群</a-button>
							</div>
						</div>
					</template>
				</div>
				<div class="box-btn">
					<a-button class="btn" @click="showSaveReport">保存报表</a-button>
					<a-button type="primary" class="btn" @click="computeAttr">计算</a-button>
				</div>
			</div>
			<div class="data-view">
				<div class="chart-box">
					<div class="chart-head" v-if="happendSel && isTotal === false">
						<a-row style="padding-top: 20px">
							<a-col :span="1"></a-col>
							<a-col :span="23">
								<a-dropdown>
									<a-menu slot="overlay" @click="handleMenuClick">
										<template v-if="curUserGroupsCName.length !== 0">
											<template v-for="(item, index) in curUserGroupsCName">
												<a-menu-item :key="index">
													<a-icon type="user" />
													{{ item }}
												</a-menu-item>
											</template>
										</template>
									</a-menu>
									<a-button style="margin-left: 8px">
										{{ curUserCName }}
										<a-icon type="down" />
									</a-button>
								</a-dropdown>
							</a-col>
						</a-row>
					</div>

					<template v-if="happendSel === true">
						<div id="chart" class="chart-context"></div>
					</template>
					<template v-else>
						<a-empty style="margin-top: 160px" />
					</template>
				</div>
				<a-divider></a-divider>
				<a-button class="exportClass" @click="exportReport"  icon="download"></a-button>

				<div class="table-class">
					<!--					<TableFunnel :chartViewSourceData="chartViewData"></TableFunnel>-->
					<TableFunnel
						:chartViewSourceData="chartViewData"
						:leftConditions="conditions"
						:isTotal="isTotal"
					></TableFunnel>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { Component, Vue, Watch } from 'vue-property-decorator'
	import Breadcrumb from '@/layout/components/Breadcrumb/index.vue'
	import Shortcuts from '@/layout/components/Breadcrumb/Shortcuts.vue'
	import DataConfig from '@/views/useranalysis/componets/attranalysegroup/dataType.config'
	import CustomScreen from '@/views/useranalysis/componets/attranalysegroup/customScreen.vue'
	import TableFunnel from '@/views/useranalysis/componets/attranalysegroup/tableFunnel.vue'
	import {
		exportReport,
		saveReport,
		chartGroup,
		userAttrCompute,
		userAttrList,
		userProperties,
		chartSource,
		taskOne
	} from '../../api/userAttr'
	import * as echarts from 'echarts'

	Vue.prototype.$echarts = echarts
	@Component({
		components: {
			Breadcrumb,
			Shortcuts,
			CustomScreen,
			TableFunnel
		}
	})
	export default class AttrAnalyse extends Vue {
		/* 报表id */
		public chartId:any
		/* 用户属性 */
		private userAttr: { [key: string]: any } = []
		/* 当前弹窗选择的类型 */
		private dialogType = ['tableSave']
		/* 选择查询是不是总体 */
		private isTotal = false
		/* 查询报表结果*/
		private chartSourceList: any = []
		/* 添加至看板*/
		private chartSourceCurList: any = []
		/* 全部的用户属性*/
		private arrList: any = []
		/* 选择的用户属性*/
		private selUserAttr: any = []
		/* 用户分群 */
		private userGroups: any = [0]
		/* 当前选择的用户分群*/
		private curUserGroups: any = ['总体']
		/* 图表上可选择的字段内容数组*/
		private curUserGroupsCName: any = []
		/* 用户弹框*/
		private saveDialog: any = false
		/* 用户弹框*/
		private soutDialog: any = false
		/* 图表上选择的字段内容*/
		private curUserCName: any = '请选择分组项'
		/*保存报表时需要的名称*/
		private reportName: any = ''
		/* 是否是人群分析 */
		private isPeopleGroup: any = false
		/* 用户分群条例项 */
		private funnelItem: any = [{}, {}]
		/* 点击左侧计算时 左侧的筛选项*/
		private conditions: any = []
		// 点击计算返回的数据
		private chartViewData: any = {}
		//导出时候的百分比
		private precentValue = 0
		//导出时的id
		private taskId: any
		//下标
		private max = 0
		/* 上次发送的json报文*/
		private lastSendData: any = null

		private happendSel: any = false
		//定时器
		private precentInterval: any
		/* 用来配合curUserGroups数据变化*/
		private datas: any = ''
		/* 用来配合curUserGroups数据变化*/
		private needMove: any = 0
		private condition: { [key: string]: any } = {} // 存储查询参数

// 面包屑处 报表展示  报表搜索 获取报表 删除报表等在最下面的776行开始
		private curPage = 'userAttr'
		private resultsFilter: any = {} // 下载使用参数
		private projectId = localStorage.getItem('productId')
		private reportlist: any = []
// 面包屑处 报表展示 over

		mounted(): void {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let _this = this
			this.chartId = this.$router.currentRoute.query.id

			const iterator:any = mountMethods()
			iterator.next()

			function * mountMethods(){
				yield	_this.getUserAttr(iterator)
				yield	_this.getChartSource(iterator)
				yield	_this.getRepoetData('',iterator)
				yield	_this.getChartQueryData()
			}

		}

		private handleMenuClick({ key }: any) {
			if (typeof key === 'number') {
				this.curUserCName = this.curUserGroupsCName[key]
				this.lastSendData['x_axis_field'] = this.lastSendData['byFields'][key]
				this.computeAttr(true)
			}
		}

		/* 显示保存报表弹框*/
		private showSaveReport() {
			this.saveDialog = true
		}

		/*保存报表*/
		private saveReport() {
			let params: any = {}
			params['chartSize'] = 'middle'
			params['chartName'] = this.reportName
			params['chartSource'] = 'userAttr'
			params['projectId'] = Number(localStorage.getItem('productId'))
			params['queryData'] = JSON.stringify(this.getWebPageData())
			params.resultsFilter = JSON.stringify({
				requestOption: this.condition
			})

			if (!this.isNullStr(this.reportName)) {
				this.$message.warn('报表名称最低2个字符,最多24个字符,不可以为空,不可以带空格')
				return
			}
			if (this.dialogType[0] === 'tableToLook') {
				params['chartGroupsIds'] = this.chartSourceCurList

				chartGroup(params)
					.then(() => {
						this.$message.success('保存成功')
					})
					.catch((err: any) => {
						this.$message.error(err.msg || err.message, 5)
					})
			} else {
				saveReport(params)
					.then(() => {
						this.$message.success('保存成功')
						this.getRepoetData('',undefined)
					})
					.catch((err: any) => {
						this.$message.error(err.msg || err.message, 5)
					})
			}

			this.saveDialog = false
		}

		// 获取报表详情（存在chartId时）
		private getChartQueryData() {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let t = this
			if (this.chartId) {
				this.$request('/reportservice/chart', {
					method: 'GET',
					data: {
						projectId: Number(this.projectId),
						chartId: Number(this.chartId)
					},
					customError: true
				})
					.then((res: any) => {
						let {code, data, message} = res
						if (code !== 200) {
							this.$message.error(message || message, 5)
							return
						}
						let {queryData} =data
						queryData = JSON.parse(queryData)
						t.selUserAttr[0]=queryData.indicator.field
						t.selUserAttr[1]=queryData.indicator.aggregator

						for (let i = 0; i < queryData.byFields.length - 1 ; i++) {
							t.addUserGroups()
						}

						t.curUserGroups = []
						if (queryData.byFields.length === 0) {
							t.curUserGroups.push("总体")
						}else{
							for (let i = 0; i < queryData.byFields.length; i++) {
								t.curUserGroups.push(queryData.byFields[i].attrName)
							}
						}
					})
					.catch((err: any) => {
						this.$message.error(err.msg || err.message, 5)
					})
			}
		}

		private saveSout() {
			this.soutDialog = false
		}

		private clearUserGroups() {
			this.curUserGroups = ['总体']
			this.userGroups = [0]
		}

		private isNullStr(str: string) {
			if (str.indexOf(' ') > -1 || str.length > 24 || str.length < 2) {
				return false
			} else {
				return true
			}
		}

		private checkUserGroups() {
			for (let i = 0; i < this.curUserGroups.length; i++) {
				if (this.curUserGroups[i] === '总体') {
					this.clearUserGroups()
					break
				}
			}
		}

		/* 导出报表 */
		public exportReport() {
			let params: any = {}
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let t = this
			params['projectId'] = Number(localStorage.getItem('productId'))
			params['taskName'] = '属性分析_' + this.getNowFormatDate()
			params['taskSource'] = 'userAttr'
			params['body'] = JSON.stringify(this.getWebPageData())
			exportReport(params)
				.then(res => {
					if (res.code === 400) {
						t.$message.error(res.message)
					} else {
						t.taskId = res.data
						t.soutDialog = true
						t.$message.success('提交任务成功 正在计算中')
						t.precentInterval = setInterval(this.precentValueAdd, 125)
					}
				})
				.catch((err: any) => {
					this.$message.error(err.msg || err.message, 5)
				})
		}
		private precentValueAdd() {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let t = this
			this.precentValue++
			if (this.precentValue >= 80) {
				window.clearInterval(this.precentInterval)
				this.$message.warn('计算时间过长 请稍后在任务列表中下载')
			}
			if (this.precentValue % 25 === 0) {
				let params: any = {}
				params['taskId'] = this.taskId
				taskOne(params)
					.then(res => {
						if (res.data.status === '计算完成') {
							t.soutDialog = false
							window.open('/reportservice/task/download/' + t.taskId)
							t.precentValue = 0
							window.clearInterval(this.precentInterval)
							t.taskId = ''
						} else if (res.data.status === '计算失败') {
							t.soutDialog = false
							t.taskId = ''
							t.precentValue = 0
							window.clearInterval(this.precentInterval)
						}
					})
					.catch(res => {
						window.clearInterval(this.precentInterval)
						t.taskId = ''
						t.precentValue = 0
						this.$message.error(res.msg || res.message, 5)
					})
			}
		}

		private getNowFormatDate() {
			let date = new Date()
			let year = date.getFullYear()
			let month: any = date.getMonth() + 1
			let strDate: any = date.getDate()
			if (month >= 1 && month <= 9) {
				month = '0' + month
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = '0' + strDate
			}
			return year + month + strDate
		}

		/* 增加用户分群*/
		private addUserGroups() {
			if (this.userGroups.length >= 2) {
				this.$message.warn('最多只能添加两条分组项')
				return
			}
			this.datas = ''
			for (let i = 0; i < this.userGroups.length; i++) {
				if (this.max < this.userGroups[i]) {
					this.max = this.userGroups[i]
				}
			}
			this.max += 1
			this.userGroups.push(this.max)
		}

		/* 删除用户分群*/
		private removeUserGroups(index: number | string) {
			this.userGroups.splice(index, 1)
			this.curUserGroups.splice(index, 1)
		}

		private initChartView() {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let t = this
			let chartView = Vue.prototype.$echarts.init(document.getElementById('chart'))

			chartView.setOption(DataConfig.option)
			let datax: any = []
			let isTotalName = ''
			if (t.chartViewData === undefined){
				return
			}
			if (this.isTotal) {
				let field = this.chartViewData.indicator.field
				let fieldName = ''
				for (let j = 0; j < this.arrList.length; j++) {
					if (field === this.arrList[j].attrCode) {
						fieldName = this.arrList[j].attrName
					}
				}
				let fieldTail = this.chartViewData.indicator.aggregator.aggregatorAlias
				isTotalName = fieldName + '的' + fieldTail
				datax.push(isTotalName)
			} else {
				for (let i = 0; i < t.chartViewData.rows.length; i++) {
					let dataxName = ''
					for (let j = 0; j < t.chartViewData.rows[i].byValues.length; j++) {
						dataxName += t.chartViewData.rows[i].byValues[j]
					}
					datax.push(dataxName)
				}
			}

			let dataConfig: any = DataConfig.option

			/*设置x轴坐标*/
			dataConfig['xAxis'][0] = { data: datax }

			let series: any = []

			if (this.isTotal) {
				let seriesItem: any = {}
				seriesItem['name'] = isTotalName
				seriesItem['type'] = 'bar'
				seriesItem['barGap'] = '-100%'
				seriesItem['emphasis'] = { focus: 'series' }
				seriesItem['data'] = []
				seriesItem['data'].push(Number(this.chartViewData.rows[0].values[0]))
				series.push(seriesItem)
			} else {
				for (let i = 0; i < t.chartViewData.series.length; i++) {
					let seriesItem: any = {}
					seriesItem['name'] = t.chartViewData.series[i]
					seriesItem['type'] = 'bar'
					seriesItem['barGap'] = '-100%'
					seriesItem['emphasis'] = { focus: 'series' }
					seriesItem['data'] = []
					for (let j = 0; j < t.chartViewData.rows.length; j++) {
						seriesItem['data'].push(Number(t.chartViewData.rows[j].values[i]))
					}

					series.push(seriesItem)
				}
			}

			dataConfig['series'] = series

			chartView.setOption(dataConfig)

			this.$forceUpdate()
		}

		/* 添加筛选条件 */
		private addCondition() {
			const customScreenRefToUser: any = this.$refs.customScreenRefToUser
			customScreenRefToUser.editCond({ i: null })
		}

		/* 计算用户属性*/
		private computeAttr(isLast?: any) {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let t = this
			//是否点击计算
			this.happendSel = true

			let params: any = {}
			if (isLast === true) {
				params = this.lastSendData
			} else {
				params = this.getWebPageData()
			}
			if (params['filter'] === undefined) return

			this.condition = params
			userAttrCompute(params).then((res: any) => {
				t.curUserGroupsCName = []
				//存储请求内容
				t.lastSendData = params
				//把第一个元素放到图表显示主体里面
				t.curUserCName = params.x_axis_field.attrName

				for (let i = 0; i < params.byFields.length; i++) {
					t.curUserGroupsCName.push(params.byFields[i].attrName)
				}
				t.chartViewData = res.data
				t.initChartView()
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})
		}

		/* 获取当前页面填写的报文字段*/
		private getWebPageData() {
			let params: any = {}
			params['projectId'] = Number(localStorage.getItem('productId'))
			params['byFields'] = this.getByFieldsData()
			if (params['byFields'].length === 0) {
				this.$message.error('请选择分组项')
				return
			}
			if (params['byFields'][0] === false) {
				params['byFields'] = []
				this.isTotal = true
			} else {
				this.isTotal = false
			}
			params['filter'] = this.getFilterData()
			params['indicator'] = this.getIndicator()
			params['x_axis_field'] = params['byFields'].length === 0 ? {} : params['byFields'][0]
			return params
		}

		private getIndicator() {
			let indicator: any = {}
			indicator['aggregator'] = this.selUserAttr[1]
			indicator['field'] = this.selUserAttr[0]
			return indicator
		}

		/* 获取byfields字段*/
		private getByFieldsData() {
			let byFields: any = []
			for (let i = 0; i < this.curUserGroups.length; i++) {
				if (this.curUserGroups[i] === '总体') {
					return [false]
				}
			}
			for (let i = 0; i < this.curUserGroups.length; i++) {
				let item: any = {}

				item['attrType'] = 'user'
				for (let j = 0; j < this.arrList.length; j++) {
					if (this.curUserGroups[i] === this.arrList[j].attrName) {
						item['attrName'] = this.arrList[j].attrName
						item['attrCode'] = this.arrList[j].attrCode
						item['dataType'] = this.arrList[j].dataType
					}
				}
				byFields.push(item)
			}
			return byFields
		}

		/* 获取filter字段*/
		private getFilterData() {
			const customScreenRefToUser: any = this.$refs.customScreenRefToUser
			let filter = customScreenRefToUser.getFilterConditions()
			this.conditions = filter.conditions
			return filter
		}

		/*点击群组比较*/
		private toPeopleCompare() {
			this.isPeopleGroup = !this.isPeopleGroup
			this.$forceUpdate()
		}

		/*增加群组比较的条目*/
		addUserGroup() {
			this.funnelItem.push({
				relevanceField: '',
				key: this.funnelItem.length + 1,
				act: false,
				mes: {}
			})
		}

		/*删除群组比较的条目*/
		remvnoUserGroup(i: any) {
			// 移除筛选条件
			if (typeof i === 'number') {
				// eslint-disable-next-line no-empty
				i = i - 1 //点击第三个元素 实际上是list的list[2]
				for (let j = i + 1; j <= this.funnelItem.length - 1; j++) {
					this.funnelItem[j].key = this.funnelItem[j].key - 1
				}
				this.funnelItem.pop()
				return
			}
		}

		/*获取用户属性*/
		private getUserAttr(iterator:any) {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let t = this
			let param = {
				projectId: Number(localStorage.getItem('productId'))
			}
			// eslint-disable-next-line @typescript-eslint/no-unused-vars
			userProperties(param).then((res: any) => {
				for (let i = 0; i < res.data.length; i++) {
					let userItem = res.data[i]
					let item = {
						value: userItem.attrCode,
						label: userItem.attrName
					}
					t.userAttr.push(item)
					let children: any = []

					for (let j = 0; j < userItem.analysis.length; j++) {
						children.push({
							value: userItem.analysis[j].aggregatorCode,
							label: userItem.analysis[j].aggregatorAlias
						})
					}
					t.userAttr[i].children = children
				}
				t.selUserAttr[0] = t.userAttr[0].value
				t.selUserAttr[1] = t.userAttr[0].children[0].value
				if (iterator !== undefined) {
					iterator.next()
				}
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})

			userAttrList(param).then((res: any) => {
				t.arrList = res.data
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})
		}

		private getChartSource(iterator:any) {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let that = this
			let param = {
				projectId: localStorage.getItem('productId'),
			}
			chartSource(param).then((res: any) => {
				that.chartSourceList = res.data
				if (iterator) {
					iterator.next()
				}
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})
		}

		// 搜索报表
		private handleSearchReport(params: string) {
			this.getRepoetData(params,undefined)
		}
		// 报表列表（事件模型）
		private getRepoetData(params: string,iterator:any) {
			const url = `/reportservice/chart/chartSource/${localStorage.getItem('productId')}`
			this.$request(url, {
				method: 'GET',
				data: {
					chartName: params,
					chartSource: this.curPage
				},
				customError: true
			})
				.then((res: any) => {
					console.log(111)
					const { data } = res
					this.reportlist = data
					if (iterator){
						iterator.next()
					}
				})
				.catch((err: any) => {
					this.$message.error(err.msg || err.message, 5)
				})
		}
		// 删除报表
		private delReport(params: any) {
			this.$request(`/reportservice/chart/${params}`, {
				method: 'DELETE',
				data: {},
				customError: true
			})
				.then((res: any) => {
					if (res.code === 200) {
						this.$message.success('删除报表成功')
						this.getRepoetData('',undefined)
					}
				})
				.catch((err: any) => {
					this.$message.error(err.message, 5)
				})
		}

		/*用户分群添加筛选条件*/
		private editCond(i: any) {
			const customScreenRef: any = this.$refs['customScreenRef' + i]
			customScreenRef[0].editCond({ i: null })
		}
		private handleRefresh() {
			this.computeAttr()
		}
	}
</script>

<style lang="scss" scoped>
	.title {
	}

	.importColor {
		color: $red;
	}

	.dialogContent {
		margin-top: 20px;
		width: 100%;
	}

	.itemHead {
		height: 32px;
		line-height: 32px;
		float: right;
		margin-right: 10px;
	}
	.exportClass {
		float: right;
		margin-right: 30px;
	}

	.table-class {
		margin-top: 90px;
		padding: 10px;
		width: 100%;
		background-color: #ffffff;
	}

	.screen {
		width: 400px;
	}

	.driver-line {
		height: 20px;
	}

	.user-groups-item {
		position: relative;
		height: 30px;
		width: 100%;
		line-height: 30px;

		.title {
			font-size: 20px;
		}

		.to-group-compare {
			float: right;
		}

		.to-group-compare-left {
			float: left;
			color: #1f3159;
		}

		.user-groups-item-select {
			width: 150px;
		}
	}

	.steps {
		width: 100%;
		position: relative;
		height: auto;
		margin-top: 10px;

		.step-wrap {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.step-wrap-group-num {
				margin-left: 10px;
			}
		}
	}

	.data-view {
		background-color: #ffffff;
	}

	.groups-num-context {
		width: 60px;
		height: 30px;
		background-color: $gray-1;
	}

	.user-groups-item-right {
		position: relative;
		float: right;
	}

	.user-cascader {
		margin-top: 20px;
	}

	.chart-box {
		width: 100%;
		height: 500px;

		.chart-head {
			height: 50px;
			width: 100%;

			.drop-down {
				float: right;
				margin-right: 20px;
			}
		}

		.chart-context {
			height: 450px;
			width: 100%;
		}
	}

	.condition-box {
		padding: 4px;
		height: 25px;

		span {
			color: $blue-4;
		}

		i {
			background-color: $blue-1;
			color: $blue-4;
		}
	}
</style>
